<script setup>
import {onMounted, reactive, ref, toRefs, watchEffect} from "vue";
import {useLoginStore} from "../store/user.ts";
import {useRoute} from "vue-router";

onMounted(() => {
  init()
})
const route = useRoute();
let params = route.params;
console.log(params)
const loginStore=useLoginStore();
let {id} =toRefs(loginStore.getUserInfo())
const message = reactive({
  to: "100001",
  from:id.value,
  msg: ""
})

const msgList=ref([])
const msg={
  mymsg:"",
  docmsg:""
}
function onClickLeft() {
  history.go(-1)
}
watchEffect(()=>{
  if(route.params){
    params=route.params
  }
})
// let userLists=ref([]);
let websocket = null;

function send() {
  websocket.send(JSON.stringify(message));
  msg.mymsg=message.msg
  msgList.value.push({
    mymsg:msg.mymsg
  })
  message.msg="";

}


function init() {
  let socketUrl = "ws://localhost:8080/socket/" + message.from;
  websocket = new WebSocket(socketUrl);
  //打开事件
  websocket.onopen = function () {
    console.log("websocket已打开");
  };
  websocket.onmessage = function (msg) {
    console.log("收到数据====" +  msg.data)
    var msgObject = JSON.parse(msg.data);
    console.log( msgObject.msg)

    msgList.value.push({
      docmsg:msgObject.msg
    })


  };
  //关闭事件
  websocket.onclose = function () {
    console.log("websocket已关闭");
  };
  //发生了错误事件
  websocket.onerror = function () {
    console.log("websocket发生了错误");
  }
}
</script>

<template>
  <div class="main">
    <van-nav-bar title="咨询问诊" left-text="返回" left-arrow  @click-left="onClickLeft" />
    <div class="header">
      <h4>{{params.doctorName}}医生</h4>
    </div>
    <div class="contents" ref="contents">
      <template v-for="(item, index) in msgList">
        <div class="content">
          <div class="mybox" v-if="item.mymsg!==undefined">
            <div class="msg">
              {{ item.mymsg }}
            </div>
            <div class="triangle_right"></div>
            <van-image
                round
                width="2rem"
                height="2rem"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </div>
          <div class="robotbox" v-if="item.docmsg!==undefined">
            <van-image
                round
                width="2rem"
                height="2rem"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <div class="triangle_left"></div>
            <div class="recivemsg">
              {{ item.docmsg }}
            </div>

          </div>
        </div>
      </template>
    </div>
    <div class="footer">
      <div class="edit">
        <van-cell-group inset>
          <van-field
              v-model="message.msg"
              rows="2"
              autosize
              type="textarea"
              placeholder="请输入"
              show-word-limit
          />
        </van-cell-group>

      </div>
      <div class="buttons">
        <van-button plain type="primary" @click="send">发送</van-button>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 10px;

  .header {
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f0f0f0;
  }

  .contents {
    height: 400px;
    // display: flex;
    flex-direction: column;
    overflow-y: scroll;

    .content {
      width: 100%;
      height: fit-content;

      .mybox {
        display: flex;
        justify-content: right;
        margin-top: 5px;

        .triangle_right {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;
          border-left: 10px solid #bed5ec;
        }

        .msg {
          float: right;
          padding: 5px 10px;
          background-color: #bed5ec;
          font-size: 14px;
          border-radius: 2px;
          margin-bottom: 10px;
          max-width: 400px;
        }


      }

      .robotbox {
        display: flex;

        .recivemsg {
          padding: 5px 10px;
          background-color: #bed5ec;
          font-size: 14px;
          border-radius: 2px;
          margin-bottom: 10px;
          max-width: 400px;
        }

        .triangle_left {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;
          border-right: 10px solid #bed5ec;

        }

      }
    }

  }

  .footer {
    border-top: 1px solid #f0f0f0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .edit {
      height: 100px;

    }

    .buttons {
      display: flex;
      justify-content: right;


    }
  }
}
</style>